<template>
	<view class="user">
		<view class="info">
			<uni-icons type="person" size="40" color="red"></uni-icons>
			<view class="msg">
				<view class="name">姓名</view>
				<view class="class">班级学号</view>
			</view>
		</view>
		<view class="oper">
			<uni-grid :column="4" :showBorder='true' @change="onchange">
				<uni-grid-item :index="0">
					<view class="box">
						<uni-icons type="star" color="red"></uni-icons>
						<view class="title">我的收藏</view>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="1">
					<view class="box">
						<uni-icons type="search" color="green"></uni-icons>
						<view class="title">电影搜索</view>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="2">
					<view class="box">
						<uni-icons type="pyq" color="blue"></uni-icons>
						<view class="title">每日运势</view>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="3">
					<view class="box">
						<uni-icons type="eye" color="red"></uni-icons>
						<view class="title">60秒看世界</view>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="4">
					<view class="box">
						<uni-icons type="bars" color="#aa007f"></uni-icons>
						<view class="title">豆瓣排行</view>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="5">
					<view class="box">
						<uni-icons type="heart-filled" color="red"></uni-icons>
						<view class="title">自拟模块5</view>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="6">
					<view class="box">
						<uni-icons type="heart-filled" color="red"></uni-icons>
						<view class="title">自拟模块</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="box">
						<uni-icons type="heart-filled" color="red"></uni-icons>
						<view class="title">自拟模块6</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script setup>
	function onchange(e) {
		let {
			index
		} = e.detail
		let urls = [
			"/pages/fav/fav",
			"/pages/movieSearch/movieSearch",
			"/pages/everyDay/everyDay",
			"/pages/readWorld/readWorld",
			"/pages/doubanMovie/doubanMovie"
		]
		uni.navigateTo({
			url: urls[index]
		})

	}
</script>

<style>
	.info {
		height: 100px;

		display: flex;
		align-items: center;
		/* border: 1px solid red; */
		margin-left: 30px;
	}

	.info .msg {
		margin-left: 10px;
	}

	.oper {
		margin: 30px 10px;
	}

	.box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;

	}
</style>